<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客详情</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <style>
        .avatarUrl {
            width: 40px;
            height: 40px;
            float: left;
            border-radius: 50%;
            /*border: 1px solid black;*/
        }

        .nickname {
            margin-left: 50px;

        }

        .createdTime {
            margin-left: 50px;
            color: #999999;
        }

        .clear:after {
            display: block;
            content: '';
            clear: both;
        }

        .item-content {
            margin-top: 10px;
            cursor: pointer;
            min-height: 100px;
            padding: 10px;
        }

        .blog-img{
            width: 150px;
            margin-top: 10px;

        }

        .comment-avatarUrl {
            width: 30px;
            height: 30px;
            float: left;
            border-radius: 50%;
            vertical-align: middle;
        }

        .comment-nickname {
            margin-left: 10px;
        }

        .comment-item-content {
            padding: 10px;
        }

        .comment-createdTime {
            /*margin-left: 10px;*/
            color: #999999;
        }

        .comment-item-header {
            line-height: 30px;
        }
    </style>
    <script src="./js/jq.js"></script>
    <script src="./js/bootstrap.js"></script>
    <script>
        let token = sessionStorage.getItem('token');

        function getQueryString(name) {
            const URL = new URLSearchParams(window.location.search)
            let val = URL.get(name)
            return val
        }

        function getBlog(blogId) {
            $.getJSON("http://localhost:8081/weibo/blog/one/" + blogId, function (res) {
                console.log(res)
                const blog = res.data
                const commentList = blog.commentList
                let imgshtml = "";
                blog.imgs.forEach(img => {
                    imgshtml += ` <img class="blog-img" src="http://127.0.0.1:8081/weibo/${img.url}"/>`;
                });
                //TODO 加载博客和评论需要分为两个方法
                $("#blog").empty()
                $("#blog").append(`
                     <div class="item-header clear">
                        <img class="avatarUrl" src="http://127.0.0.1:8081/weibo/${blog.user.avatarUrl}"/>
                        <div class="user-header">
                            <div class="nickname">${blog.user.nickname}</div>
                            <div class="createdTime">${blog.createdTime}</div>
                        </div>
                    </div>
                    <div class="item-content" onclick="showOne(${blog.blogId})">
                        ${blog.content}
                    </div>
                    <div class="imgs">
                                ${imgshtml}
                            </div>`)
                // console.log(commentList)
                $("#commentList").empty()
                commentList.forEach(comment => {
                    $("#commentList").append(`
                    <li class="list-group-item">
                      <div class="comment">
                        <div class="comment-item-header clear">
                          <img class="comment-avatarUrl" src="http://127.0.0.1:8081/weibo/users/${comment.user.avatarUrl}"/>
                            <span class="comment-nickname">${comment.user.nickname}</span>
                        </div>
                        <div class="comment-item-content" >
                          ${comment.content}
                        </div>
                        <div class="comment-createdTime">${comment.createdTime}</div>
                      </div>
                    </li>`)
                })
            })
        }

        let blogId = getQueryString('blogId')
        $(function () {
            // alert(blogId)
            getBlog(blogId)
        })

        function showModal(){
            $("#content").val("")
            $('#myModal').modal('show');
        }

        function save(){
            const content = $("#content").val()
            let formData = new FormData();
            formData.append("content",content)
            formData.append("blogId",blogId);
            formData.append("token",token)
            $.ajax({
                url: 'http://localhost:8081/weibo/blog/addcomment',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.code==200) {
                        alert('评论发布成功');
                        $('#myModal').modal('hide');
                        getBlog(blogId)
                    } else {
                        alert('评论发布失败：' + response.msg);
                    }
                },
                error: function() {
                    alert('博客发布失败，请稍后重试');
                }
            });
        }
    </script>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1><a href="index.html">博客jquery</a> <small>博客详情</small></h1>
    </div>
    <div class="blog" id="blog"></div>
    <hr/>
    <button type="button" onclick="showModal()" class="btn btn-primary btn-lg">发表评论</button>
    <h3>评论列表</h3>
    <div class="comments">
        <ul class="list-group" id="commentList">
            <li class="list-group-item">
                <div class="comment">
                    <div class="comment-item-header clear">
                        <img class="comment-avatarUrl" src="http://127.0.0.1:8081/weibo/5.jpg"/>
                        <span class="comment-nickname">xxx</span>
                    </div>
                    <div class="comment-item-content">
                        xxx
                    </div>
                    <div class="comment-createdTime">2023--xx--xx</div>
                </div>
            </li>
        </ul>
    </div>
</div>

<!-- 模态框 -->
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <textarea id="content" class="form-control" rows="3" placeholder="说点什么..."></textarea>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">关闭</button>
                <button class="btn btn-primary" onclick="save()" type="button">提交</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>